<template>
  <div style="overflow: auto"
       v-wechat-title="detail.name"
       v-infinite-scroll="handleInfinite"
       :infinite-scroll-delay="300"
       :infinite-scroll-disabled="disabled">
    <div class="love-background">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="tag-category-info-box">
      <div class="info">
        <h1 class="title">{{detail.name}}</h1>
        <div class="meta">
          {{ total }} 文章
        </div>
      </div>
    </div>
    <div class="tag-category-container">
      <ul class="tag-category-list">
        <li v-for="item in articleList" class="tag-category-item cf" @click="handleJump(item.id)">
          <div class="box-head">
            <span class="author">{{item.author}}</span>
            <div class="dividing"></div>
            <span class="date">{{ DateUtil.toShowTimeFormat(item.createTime) }}</span>
            <div class="dividing" v-if="item.tagsName !== undefined && item.tagsName.length > 0"></div>
            <span v-for="tag in item.tagsName" class="tag">
              {{ tag }}
            </span>
          </div>
          <div class="box-content">
            <div class="content-main">
              <div class="title-row">
                <router-link class="title"
                             :to="{ name: 'Blog', params: { bId: item.id }}"
                             v-html="item.title">
                </router-link>
              </div>
              <div class="abstract" v-html="$options.filters.ellipsis(item.content)">
              </div>
              <div class="icon">
                <i class="el-icon-view"></i>&nbsp;
                <div style="margin-right: 20px">{{ item.clickNum }}</div>
                <i class="el-icon-chat-round"></i>&nbsp;
                <div style="margin-right: 20px">{{ item.commentCount }}</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="loading-container" v-if="loading">
      <svg class="spinner" width="35px" height="35px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
      </svg>
    </div>
  </div>

</template>

<script>
import { listBlogByTagOrCategory} from "@/api/blog";
export default {
  name: "CategoryOrSort",
  filters: {
    ellipsis(value) {
      if (!value) return ''
      return value.replace(/#/g,'')
          .replace(/`/g,'')
          .replace(/\*/g,'');
    }
  },
  computed:{
    noMore() {
      return this.currentPage * this.pageSize >= this.total
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  data() {
    return {
      articleList:[],
      detail:{},
      loading: false,
      currentPage: 1,
      pageSize: 6,
      total: 0
    }
  },
  methods:{
    handleInfinite() {
      ++this.currentPage
      this.handleQuery()
    },
    handleQuery(){
      const type = this.$route.params.type
      const id = this.$route.params.id
      let queryParams ={
        "currentPage" : this.currentPage,
        "pageSize" : this.pageSize
      }
      if (type == 'category'){
        queryParams.categoryId = id
      }else {
        queryParams.tagIds = id
      }
      listBlogByTagOrCategory(queryParams).then( res => {
        const data = res.data;
        this.detail = data.detail
        const articleList = data.source;
        articleList.forEach(item => this.articleList.push(item))
        const total = res.data.total;
        this.total = total
      })
    },
    handleJump(id) {
      this.$router.push({name: 'Blog', params: { bId: id }})
    },
  },
  created(){
    this.handleQuery()
  },
}
</script>

<style scoped lang="scss">



</style>
